<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML5之LocalStorage</title>
    <!-- 职责分离  git -->
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <div class="wrapper">
        <h2>LOCAL TAPAS</h2>
        <P></P>
        <ul class="plates">
            <li>Loading Tapas...</li>
        </ul>
        <form action="" class="add-items">
            <input type="text" name="item" autofocus required placeholder="Item Name">
            <input type="submit" value="+ Add Item">
        </form>
    </div>
    <script>
        // 1. todolist form  + ul
        // 2. loading ...
        // 3. 前端的数据持久化  前端有数据库  大概只有5M空间  缓存数据
        // 树
        // const let 和 var 不同  不会提升，进入暂时性死区
        // es6 认为 变量提升 不好
        // console.log(a); // underfined
        // var a = 1;

        // console.log(addItems); // 报错 不会提升
        // console.log(addItem); // 全部提升
        const addItems = document.querySelector('.add-items'); // 性能
        const itemsList = document.querySelector('.plates');
        const items = JSON.parse(localStorage.getItem('items')) || []; // 列表
        // plates = [] es6 参数默认值
        
        function populateList(plates = [], platesList) {
            // 将todos 显示到列表
            platesList.innerHTML = plates.map((plate, i) => `
                <li>
                    <input type="checkbox" data-index=${i} id="item${i}"
                    ${plate.done? 'checked':''}/>
                    <label for="item${i}">${plate.text}</label>
                </li>
            `).join('')
        }

        function init() {
            // 取出localstorage
            // [] .length > 0
            // populateList
            const storageItems = JSON.parse(localStorage.getItem('items'))
            if (storageItems.length) {
                populateList(storageItems, itemsList)
            }
        }

        function addItem(event) {
            event.preventDefault();
            const text = this.querySelector('[name=item]').value.trim();
            // console.log(text);
            const item = { // 新建 未完成的对象
                text,
                done: false
            }
            items.push(item);
            populateList(items, itemsList);
            // storage
            // 存items
            // console.log(JSON.stringify(items)); // 将数组变成字符串，文本形式
            localStorage.setItem('items',JSON.stringify(items)) //本地空间存储
            this.reset();
            // itemsList.innerHTML.map(item => `
            //     <li>
            //         <label>${item.text}</label>
            //     </li>
            // `)
        }
        addItems.addEventListener('submit', addItem);
        populateList(items, itemsList)
    </script>
</body>
</html>